<template>
    <el-row>
        <el-col :span="1">
            <!--打开/关闭侧边栏·按钮-->
            <el-button type="text" class="fold_button" v-model="this.$store.getters.getCollapse">
                <i class="el-icon-s-fold" @click="handOff"></i>
            </el-button>
        </el-col>

        <el-col :span="8" style="margin-top: 22px">
            <!--页面路径-->
            <el-breadcrumb separator="/" >
                <el-breadcrumb-item :to="{ path: '/menu/main' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/data'"><a href="/menu/data">数据统计</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/vip'"><a href="/menu/vip">会员管理</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/order'"><a href="/menu/order">订单管理</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/order/excel'"><a href="/menu/order/excel">Excel管理</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/emp'"><a href="/menu/emp">人员管理</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/car'"><a href="/menu/car">车辆管理</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/lock'"><a href="/menu/lock">权限管理</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/setting'"><a href="/menu/setting">系统设置</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/read'"><a href="/menu/setting">教程</a></el-breadcrumb-item>
                <el-breadcrumb-item v-if="editableTabsValue=='/menu/read'">文档</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>

        <el-col :span="1" :offset="13" style="margin-top: 22px">
            <!--消息-->
            <el-badge :value="12" :size="40" class="item">
                <i class="el-icon-message-solid"></i>
            </el-badge>
        </el-col>

        <el-col :span="1">
            <!--头像下拉菜单-->
            <el-dropdown class="drop_avatar" @command="handleUserCommand">
                <el-button type="text">
                    <el-avatar :size="37" style="font-weight: bold">{{this.user.username}}</el-avatar>
                    <!--<el-avatar :size="35" :src="this.user.avatar"></el-avatar>-->
                </el-button>
                <el-dropdown-menu slot="dropdown" style="margin-top: 0px;">
                    <el-dropdown-item command="myinfo">个人中心</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "Header",
        data () {
            return {
                user:{
                    username:'miss',
                    //avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                },
                hasLogin:false,
            }
        },
        created(){
            //this.$store.commit("SET_USERINFO",sessionStorage.userInfo);
            if (this.$store.getters.getUserInfo){
                let userInfo=this.$store.getters.getUserInfo;
                this.user.username=userInfo.ename;
                this.user.avatar=userInfo.imageName;
                this.hasLogin=true;
            }
        },
        methods:{
            handOff(){
                this.$store.commit('setCollapse');//改变侧边栏状态
            },
            handleUserCommand(command){
                if (command == 'logout') {
                    this.logout();
                }
                if(command == 'myinfo') {
                    alert("用户信息页面还没有完善")
                }
            },
            logout(){

                let _this=this;
                this.axios.get('/user/delUserInfo').then(res=>{
                    _this.$store.commit("REMOVE_USERINFO");
                    _this.$router.push("/login");
                    // console.log("退出登录"+res.data)
                });
            }
        },
        computed:{
            //当前tab 初始默认为首页(/menu/main)
            editableTabsValue() {
                return this.$store.getters.editableTabsValue;
            }
        },
    }
</script>

<style scoped>
    .fold_button{
        line-height:20px;
        margin-top: 4px;
        font-size: 27px;
    }
    .userName{
        margin-top: 0px;
        font-size: 14px;
        margin-right: 7px;
        color: #606266;
    }
</style>
